<template>
	<view>
		
		<!-- 区域投用率 -->
		<view class="area-summary-rate">
		    <view class="area-summary-header">
		        <view class="area-summary-number">区域投用率</view>
		    </view>
		    <view class="area-summary-grid">
		        <view class="area-summary-item"
				v-for="(item, index) in utilData"
				:key = 'index'>
		            <span>{{ item.name }}</span><span>{{ item.value }}{{ unitValue }}</span>
		        </view>
		    </view>
		</view>
		<!-- 功能投用率主卡片 -->
		<!-- <view class="main-card">
		    <view class="main-card-title">{{ title }}</view>
		    <view class="utilization-grid">
		        <view 
				v-for="(item, index) in utilData"
				:key = 'index'
				class="utilization-item">
		            <view class="utilization-label">{{ item.name }}</view>
		            <view class="utilization-value">{{ item.value }}
						<label class="utilization-unit">{{ unitValue }}</label>
					</view>
		        </view>
		    </view>
		</view> -->
	</view>
</template>
<script>
import { timestampFormatDate } from '@/utils/FormatTime.js'
import { post, postForm } from '@/utils/request';
import { getOverviewAndAlerts, getAnomalyTrend } from '@/api/check.js';
	export default {
		name: 'kanbanRatio',
		props: {
			utilData: {
				type: Array,
				default: () => [],
			},
			title: {
				type: String,
				default: '',
			},
			unitValue: {
				type: String,
				default: '',
			},
		},
		
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	};
</script>

<style scoped lang="scss">
	/* 区域投用率 */
	.area-summary-rate {
	    background: white;
	    border-radius: 12px;
		margin-top: 10px;
	    padding: 20px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}
	
	.area-summary-header {
	    font-size: 17px;
	    font-weight: 600;
	    color: #333;
	    margin-bottom: 16px;
	}
	
	.area-summary-grid {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 6px;
	}
	
	.area-summary-item {
	    background: #f8f9fa;
	    border-radius: 8px;
	    padding: 10px 12px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 13px;
	    border: 1px solid #e9ecef;
	}
	
	.area-summary-item span:first-child {
	    font-weight: 500;
	    color: #333;
	}
	
	.area-summary-item span:last-child {
	    font-weight: 700;
	    color: #1565c0;
	    background: rgba(21, 101, 192, 0.1);
	    padding: 2px 6px;
	    border-radius: 4px;
	    min-width: 40px;
	    text-align: center;
	}
</style>